import React from 'react'
import{ Text, Image, View, StatusBar, StyleSheet } from 'react-native'
import { NavigationContext } from '@react-navigation/native';
import { Input, Button  } from 'react-native-elements';
import { pxToDp } from '../../utils/tools'
import IconFont from '../../components/IconFont'


export default class Home extends React.Component {
  static contextType = NavigationContext;

  constructor(props) {
    super(props)
    this.state = {
      userName: '',
      checkUserName: false,
      checkPassword: false,
      password: ''
    }
  }

  focusUserName = () => {
    if (this.state.userName) {
      this.setState({
        checkUserName: true
      })
    } else {
      this.setState({
        checkUserName: false
      })
    }
  }
  focusPassword = () => {
    if (this.state.password) {
      this.setState({
        checkUserName: true
      })
    } else {
      this.setState({
        checkUserName: false
      })
    }
  }
  
  render() {
    const test = '<svg t="1576153230908" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="971" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M772.87036133 734.06115723c-43.34106445 0-80.00793458 27.93273926-93.76831055 66.57714843H475.90991211c-56.60705567 0-102.66723633-46.06018067-102.66723633-102.66723633V600.82446289h305.859375c13.76037598 38.64440918 50.42724609 66.57714844 93.76831055 66.57714844 55.12390137 0 99.94812012-44.82421875 99.94812012-99.94812012S827.9942627 467.50537109 772.87036133 467.50537109c-43.34106445 0-80.00793458 27.93273926-93.76831055 66.57714844H373.24267578V401.01062011h321.92687989c55.12390137 0 99.94812012-44.82421875 99.94812011-99.94812011V190.07312011C795.11767578 134.94921875 750.29345703 90.125 695.16955567 90.125H251.12963867C196.0057373 90.125 151.18151855 134.94921875 151.18151855 190.07312011V301.0625c0 55.12390137 44.82421875 99.94812012 99.94812012 99.94812012h55.53588867v296.96044921c0 93.35632325 75.97045898 169.32678223 169.32678224 169.32678223h203.19213866c13.76037598 38.64440918 50.42724609 66.57714844 93.76831055 66.57714844 55.12390137 0 99.94812012-44.82421875 99.94812012-99.94812012s-44.90661622-99.86572266-100.03051758-99.86572265z m0-199.89624024c18.37463379 0 33.28857422 14.91394043 33.28857422 33.28857423s-14.91394043 33.28857422-33.28857422 33.28857421-33.28857422-14.91394043-33.28857422-33.28857421 14.91394043-33.28857422 33.28857422-33.28857422zM217.75866699 301.0625V190.07312011c0-18.37463379 14.91394043-33.28857422 33.28857423-33.28857421h444.03991698c18.37463379 0 33.28857422 14.91394043 33.28857422 33.28857422V301.0625c0 18.37463379-14.91394043 33.28857422-33.28857422 33.28857422H251.12963867c-18.37463379 0-33.37097168-14.91394043-33.37097168-33.28857422z m555.11169434 566.23535156c-18.37463379 0-33.28857422-14.91394043-33.28857422-33.28857422 0-18.37463379 14.91394043-33.28857422 33.28857422-33.28857422s33.28857422 14.91394043 33.28857422 33.28857422c0.08239747 18.29223633-14.91394043 33.28857422-33.28857422 33.28857422z" p-id="972"></path></svg>'
    // We can access navigation object via context
    const navigation = this.context;
    let {userName, password, checkUserName, checkPassword} = this.state
    return (
      <View style={{flex:1,justifyContent: 'center', backgroundColor: '#fff'}}>
        {/* <StatusBar backgroundColor='transparent' translucent={true} /> */}
        {/* <View style={{width: '100%', height: pxToDp(200)}}>
          <Image  style={{width: '100%', height: pxToDp(200)}} source={require('../../statics/images/login-bg.jpg')} />
        </View> */}
        <View style={{flex: 1, padding: pxToDp(20)}}>
          <Input
            value={userName}
            inputStyle={{color: '#333', fontSize: pxToDp(14)}}
            onChange={(text)=> this.setState({userName: text})}
            placeholder='请输入用户名'
            leftIcon={
              <IconFont name='icon-user1' style={{fontSize:pxToDp(14), color:'#666'}} />
            }
          />
          <Input
            value={password}
            inputStyle={{color: '#333', fontSize: pxToDp(14)}}
            onChange={(text)=> this.setState({password: text})}
            placeholder='请输入密码'
            secureTextEntry={true}
            leftIcon={
              <IconFont name='icon-password' style={{fontSize:pxToDp(14), color:'#666'}} />
            }
          />
          <Button
            title="登录"
            onPress={() => {
              this.props.navigation.navigate('TabBar')
            }}
          />
        </View>
      </View>
    )
  }
}
